<script setup>
import {ElButton, ElMessage} from "element-plus";
import {ref} from "vue";
import {articleCategoryListService,
  articleCategoryAllowListService,
  articleCategoryDisallowListService,
  articleCategoryInspectListService,
  articleCategoryAddService,
  articleCategoryUpdateService,
  articleCategoryDeleteService
} from "@/api/article.js"

const tableData = [
  {
    user: 'Tom',
    category: '热门',
    date: '2016-05-03',
    desc: '申请标签',
    audit: '已通过'
  },
  {
    user: 'Tom',
    category: '日记',
    date: '2016-05-04',
    desc: '创建话题',
    audit: '待审核'
  },
  {
    user: 'Tom',
    category: '日记',
    date: '2016-05-05',
    desc: '创建话题',
    audit: '已驳回'
  },
  {
    user: 'Tom',
    category: '人文',
    desc: '创建话题',
    date: '2016-05-06',
    audit: '已通过'
  }
]
//计数
const allowCgCount = ref()
const disallowCgCount = ref()
const inspectCgCount = ref()
const totalCgCount = ref()
//数据
const allowCgList = ref()
const disallowCgList = ref()
const inspectCgList = ref()
const CgModel = ref()

const visibleDrawer = ref();
const title = ref();
const state = ref()
const disabledValue1 = ref();
const disabledValue2 = ref();
console.log(disabledValue2)
//抽屉
const showDrawer = (row) => {
  visibleDrawer.value = true
  title.value = '新增标签'
  CgModel.value = row
}

//获取数据
const getCgData = async () => {
  let allData = await articleCategoryListService()
  let allowData = await articleCategoryAllowListService()
  let disallowData = await articleCategoryDisallowListService()
  let inspectData = await articleCategoryInspectListService()

  totalCgCount.value = allData.data.length
  allowCgCount.value = allowData.data.length
  disallowCgCount.value = disallowData.data.length
  inspectCgCount.value = inspectData.data.length

  allowCgList.value = allowData.data
  disallowCgList.value = disallowData.data
  inspectCgList.value = inspectData.data
  console.log("totalCgCount",totalCgCount.value)
  console.log("disallowCgList",disallowCgList)
}
getCgData()
//删除文章分类
import {ElMessageBox} from 'element-plus'
const deleteCategory = async (row) => {
  //提示用户 确认框
  ElMessageBox.confirm(
      '你确认要删除该分类信息吗?',
      '温馨提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        //调用接口
        let result = await articleCategoryDeleteService(row.id);
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        //刷新列表
        await getCgData()
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '用户取消了删除',
        })
      })
}
//更新数据
const updateCategory = async () => {
  CgModel.value.categoryState = state.value //更新状态
  let result = await articleCategoryUpdateService(CgModel.value)
  ElMessage.success(result.msg ? result.msg:"修改成功");
  console.log("result",result)
  //添加成功，关闭弹窗
  visibleDrawer.value = false
  await getCgData()
}
</script>

<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <el-card>
        <template #header>
          <span class="style-tag" style="color:#409EFF;border:2px solid #409EFF;">标签总数</span>
        </template>
        <div class="style-tag-content">{{totalCgCount}}</div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card>
        <template #header>
          <span class="style-tag" style="color:#E6A23C;border:2px solid #E6A23C;">待审核</span>
        </template>
        <div class="style-tag-content">{{inspectCgCount}}</div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card>
        <template #header>
          <span class="style-tag" style="color:#67C23A;border:2px solid #67C23A;">已通过</span>
        </template>
        <div class="style-tag-content">{{allowCgCount}}</div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card>
        <template #header>
          <span class="style-tag" style="color:#F56C6C;border:2px solid #F56C6C;">已驳回</span>
        </template>
        <div class="style-tag-content">{{disallowCgCount}}</div>
      </el-card>
    </el-col>
  </el-row>
  <el-card style="margin-top: 10px">
    <el-tabs type="border-card">
      <el-tab-pane label="待审核">
        <el-table :data="inspectCgList" style="width: 100%">
          <el-table-column prop="categoryName" label="标签" width="170" />
          <el-table-column prop="createUser" label="申请人" width="170"/>
          <el-table-column prop="createTime" label="申请时间" width="270" />
          <el-table-column prop="categoryAlias" label="备注"></el-table-column>
          <el-table-column prop="categoryState" label="审核状态" width="170">
            <template #default="scope">
              <el-tag v-if="scope.row.categoryState === '已通过'" type="success">{{ scope.row.categoryState }}</el-tag>
              <el-tag v-else-if="scope.row.categoryState === '待审核'" type="warning">{{ scope.row.categoryState }}</el-tag>
              <el-tag v-else type="danger">{{ scope.row.categoryState }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="action" label="操作" width="170" align="center">
            <template #default="{row}">
              <el-button type="primary" size="small" plain @click="title='待审核';disabledValue1=false;disabledValue2=false;showDrawer(row)">审核</el-button>
              <el-button type="danger" size="small" @click="deleteCategory(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已通过">
        <el-table :data="allowCgList" style="width: 100%">
          <el-table-column prop="categoryName" label="标签" width="170" />
          <el-table-column prop="createUser" label="申请人" width="170"/>
          <el-table-column prop="createTime" label="申请时间" width="270" />
          <el-table-column prop="categoryAlias" label="备注"></el-table-column>
          <el-table-column prop="categoryState" label="审核状态" width="170">
            <template #default="scope">
              <el-tag v-if="scope.row.categoryState === '已通过'" type="success">{{ scope.row.categoryState }}</el-tag>
              <el-tag v-else-if="scope.row.categoryState === '待审核'" type="warning">{{ scope.row.categoryState }}</el-tag>
              <el-tag v-else type="danger">{{ scope.row.categoryState }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="action" label="操作" width="170" align="center">
            <template #default="{row}">
              <el-button type="primary" size="small" plain @click="title='待审核';disabledValue1=true;disabledValue2=false;showDrawer(row)">审核</el-button>
              <el-button type="danger" size="small" @click="deleteCategory(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已驳回">
        <el-table :data="disallowCgList" style="width: 100%">
          <el-table-column prop="categoryName" label="标签" width="170" />
          <el-table-column prop="createUser" label="申请人" width="170"/>
          <el-table-column prop="createTime" label="申请时间" width="270" />
          <el-table-column prop="categoryAlias" label="备注"></el-table-column>
          <el-table-column prop="categoryState" label="审核状态" width="170">
            <template #default="scope">
              <el-tag v-if="scope.row.categoryState === '已通过'" type="success">{{ scope.row.categoryState }}</el-tag>
              <el-tag v-else-if="scope.row.categoryState === '待审核'" type="warning">{{ scope.row.categoryState }}</el-tag>
              <el-tag v-else type="danger">{{ scope.row.categoryState }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="action" label="操作" width="170" align="center">
            <template #default="{row}">
              <el-button type="primary" size="small" plain @click="title='待审核';disabledValue1=false;disabledValue2=true;showDrawer(row)">审核</el-button>
              <el-button type="danger" size="small" @click="deleteCategory(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- 抽屉 -->
      <el-drawer v-model="visibleDrawer" :title="title" direction="rtl" size="50%">
        <!-- 添加文章表单 -->
        <el-form :model="CgModel" label-width="100px">
          <el-form-item label="标签">
            <el-input v-model="CgModel.categoryName" placeholder="请输入标题" disabled></el-input>
          </el-form-item>
          <el-form-item label="申请人">
            <el-input v-model="CgModel.createUser" placeholder="请输入标题" disabled></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-input v-model="CgModel.categoryState" placeholder="请输入标题" disabled></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="CgModel.categoryAlias" placeholder="如要驳回文章，请填写驳回理由"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success" plain :disabled="disabledValue1" @click="state='已通过';updateCategory()">通过</el-button>
            <el-button type="danger" plain :disabled="disabledValue2" @click="state='已驳回';updateCategory()">驳回</el-button>
          </el-form-item>
        </el-form>
      </el-drawer>
    </el-tabs>
  </el-card>
</template>

<style scoped lang="scss">
.style-tag {
  padding: 5px;
  border-radius: 5px;
  font-weight:bold
}
.style-tag-content {
  font-size: 32px;
  text-align: center
}
</style>